{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .mui-table h4 ,.mui-media-body h4{
        line-height: 21px;
        font-weight: 400;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <!-- 
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
     -->
    <a  href="/center/club/player/?clubid={{clubid}}&type=1" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>
<div class="mui-content">
  <ul class="mui-table-view">
			<li class="mui-table-view-divider">玩家查找</li>
			<li class="mui-table-view-cell">
				<div class="mui-row" style="width: 100%;">
                     <div class="mui-col-sm-9 mui-col-xs-6 ">
                        <input type="text" name="playerId" class="mui-input-clear" placeholder="请输入玩家ID">
                     </div>
                      <div class="mui-col-sm-3 mui-col-xs-6" >
                        <button class="mui-btn mui-btn-primary mui-pull-right" id="create" style="text-align:right;padding-right:5px">查询 </button>
                    </div>
               </div>
			</li>
	</ul>
<div id="template" class="mui-table">
</div>
</div>

{% endblock%}

{% block script %}
<script>
   //加载模板
   var clubid = "{{clubid}}";
   mui.init();
   
    var falg = false;
    $("#create").on("tap",function () {
    	var that = this;
    	var playerId = $("input[name='playerId']").val();
        console.log('playerId-:'+playerId);
        
        if(playerId===''){
            mui.toast("请输入玩家ID！");
            return;
        }
        var href = '/center/club/searchplayer/?playerId='+playerId;
        mui.ajax(href,{
            data:{},
            dataType:'json',//服务器返回json格式数据
            type:'get',//HTTP请求类型
            success:function(data){
                //获得服务器响应
                console.log('get data:'+JSON.stringify(data));
                //console.log('get data.data:'+JSON.stringify(data.data));
                //$("#template").append(tplRender(data));
                if(data.errno==0){
               	 temp(data.data);
                }else {
                  mui.toast(data.errmsg);
                }
            }
        });
        return false;
    })
    
    function temp(data) {
					var table = document.body.querySelector('.mui-table');
					table.innerHTML='';
					if(data!=null){
						var ul = document.createElement('ul');
						ul.className = 'mui-table-view margin-top-6';
						ul.innerHTML = '<li class="mui-table-view-cell mui-media">'+
	                            '<img class="mui-media-object mui-pull-left" src="'+data.headimgurl+'">'+
	                            '<div class="mui-media-body">'+
	                               '<h4 class="mui-ellipsis">'+data.nickname+'</h4>'+
	                                '<p class="mui-ellipsis">'+
	                                '<span class="original">'+data.uid+'</span>'+
	                                '</p>'+
	                            '</div>'+
	                    '</li>'+
	                    '<li class="mui-table-view-cell size-14" >'+
	                       '<div class="mui-row">'+
	                            '<div class="mui-col-sm-6 mui-col-xs-6">'+
	                              '<div>状态：<span class="text-success">正常</span></div>'+
	                            '</div>'+
	                            '<div class="mui-col-sm-6 mui-col-xs-6">'+
	                                  '<a class="mui-btn mui-btn-primary clubplayer" value="2" href="/center/club/addplayer/?player_id='+data.uid+'&club_id='+clubid+'">邀请加入</a>'
	                            '</div>'+
	                        '</div>'+
	                    '</li>';
						table.appendChild(ul);
				}else{
					var ul = document.createElement('ul');
					ul.className = 'mui-table-view margin-top-6';
					ul.innerHTML = '<li class="mui-table-view-cell size-14" >'+
                       '<div class="mui-row">'+
                            '<div class="mui-col-sm-6 mui-col-xs-6">'+
                                '<div>暂无数据'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</li>';
					table.appendChild(ul);
				}
	}
    
    mui.ready(function() {
        //邀请入会
        mui(document).on('tap','a.clubplayer',function(){
            var self = this;
            var btnArray = ['否', '是'];
            mui.confirm('是否确认邀请加入？', '', btnArray, function(e) {
                if (e.index == 1) {
                    //获取id
                    var id = self.getAttribute("href");
                    console.log('data--id:'+id);
                    mui.post(id,function(data){
                    	console.log('get data:'+JSON.stringify(data));
                    	//get data:{"errno":1000,"errmsg":"添加失败，请检查输入正确，并且不要重复添加"}
                    	   if(data.errno==0){
                                mui.toast(data.data.name);
                                setTimeout(function() {
                                  location.reload();
                                }, 2000);
                            }else {
                                mui.toast(data.errmsg);
                            }
                    	 
                       },'json'
                    );
                }
            })
            return false;
        })
        
        mui("header").on('tap','.mui-pull-left',function(){
            var id = this.getAttribute("href");
            mui.openWindow({
                url: id,
            });
            return;
            })
        
    });
</script>
{% endblock %}
